{% extends "base.html" %}

{% block title %}
发现活动 - 城会玩
{% endblock %}

{% block style %}
{{ block.super }}
    <style>
        :root {
            --primary: #FF6B35;
            --secondary: #2A9D8F;
            --light: #F8F9FA;
            --dark: #343A40;
            --accent: #E9C46A;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            padding-top: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        main {
            flex: 1;
        }

        /* 筛选区域整合到标题区域 */
        .filter-header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }

        .filter-header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1.5rem;
        }

        .filter-header-title {
            flex: 1;
            min-width: 250px;
        }

        .filter-header-title h1 {
            font-weight: 700;
            margin-bottom: 0.5rem;
            font-size: 2rem;
        }

        .filter-header-title p {
            opacity: 0.9;
            margin-bottom: 0;
            font-size: 1.1rem;
        }

        .filter-header-form {
            flex: 2;
            min-width: 300px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 1.5rem;
        }

        .filter-row {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .filter-group {
            flex: 1;
            min-width: 150px;
        }

        .filter-group label {
            color: white;
            font-weight: 500;
            margin-bottom: 0.5rem;
            display: block;
        }

        .filter-control {
            width: 100%;
            padding: 0.6rem 0.75rem;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.9);
            color: #333;
            transition: all 0.3s;
        }

        .filter-control:focus {
            outline: none;
            border-color: white;
            background: white;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
        }

        .filter-actions {
            display: flex;
            align-items: flex-end;
            gap: 0.5rem;
        }

        .btn-filter {
            background: white;
            color: var(--primary);
            border: none;
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s;
            white-space: nowrap;
        }

        .btn-filter:hover {
            background: var(--light);
            transform: translateY(-2px);
        }

        /* 活动卡片样式 */
        .activity-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            height: 100%;
            border: 1px solid rgba(0,0,0,0.05);
        }

        .activity-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        }

        .activity-image {
            height: 200px;
            background-color: #eee;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .activity-category {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: var(--primary);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        /* 活动状态样式 - 根据时间动态显示 */
        .activity-status {
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .activity-status.upcoming {
            background-color: rgba(40, 167, 69, 0.8); /* 绿色 - 即将开始 */
        }

        .activity-status.ongoing {
            background-color: rgba(255, 193, 7, 0.8); /* 黄色 - 进行中 */
        }

        .activity-status.ended {
            background-color: rgba(108, 117, 125, 0.8); /* 灰色 - 已结束 */
        }

        .activity-status.cancelled {
            background-color: rgba(220, 53, 69, 0.8); /* 红色 - 已取消 */
        }

        .activity-status.draft {
            background-color: rgba(108, 117, 125, 0.8); /* 灰色 - 草稿 */
        }

        .activity-full {
            background-color: rgba(220, 53, 69, 0.8); /* 红色 - 已满员 */
        }

        .activity-body {
            padding: 1.5rem;
        }

        .activity-title {
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 0.75rem;
            color: #333;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }

        .activity-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 0.75rem;
        }

        .activity-location {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            color: #666;
            font-size: 0.95rem;
        }

        .activity-participants {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;
        }

        .progress {
            height: 8px;
            flex-grow: 1;
            margin-right: 10px;
            border-radius: 4px;
            background-color: #e9ecef;
        }

        .progress-bar {
            border-radius: 4px;
        }

        .participant-count {
            font-size: 0.9rem;
            color: #666;
            white-space: nowrap;
            font-weight: 500;
        }

        .popular-activities {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            padding: 1.5rem;
            border: 1px solid rgba(0,0,0,0.05);
        }

        .popular-title {
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            padding-bottom: 0.5rem;
        }

        .popular-item {
            display: flex;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eee;
            transition: transform 0.2s;
        }

        .popular-item:hover {
            transform: translateX(5px);
        }

        .popular-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .popular-image {
            width: 80px;
            height: 60px;
            border-radius: 8px;
            background-color: #eee;
            background-size: cover;
            background-position: center;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .popular-info {
            flex-grow: 1;
        }

        .popular-name {
            font-weight: 500;
            font-size: 0.95rem;
            margin-bottom: 0.25rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }

        .popular-meta {
            font-size: 0.85rem;
            color: #666;
        }

        .pagination {
            justify-content: center;
            margin-top: 2rem;
        }

        .page-link {
            color: var(--primary);
            border: 1px solid #dee2e6;
            padding: 0.5rem 0.75rem;
        }

        .page-item.active .page-link {
            background-color: var(--primary);
            border-color: var(--primary);
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: #666;
        }

        .empty-state i {
            font-size: 4rem;
            color: #ddd;
            margin-bottom: 1rem;
        }

        .section-title {
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }

        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: var(--primary);
            border-radius: 2px;
        }

        .stats-badge {
            background-color: var(--light);
            color: var(--dark);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 500;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .filter-header-content {
                flex-direction: column;
            }

            .filter-header-title, .filter-header-form {
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .filter-row {
                flex-direction: column;
            }

            .filter-group {
                min-width: 100%;
            }
        }
    </style>
{% endblock %}

{% block content %}
{% include "nav.html" %}
    <main>
        <!-- 整合筛选功能的标题区域 -->
        <div class="filter-header">
            <div class="container">
                <div class="filter-header-content">
                    <div class="filter-header-title">
                        <h1>发现精彩活动</h1>
                        <p>探索城市中的各种有趣活动，找到志同道合的朋友</p>
                    </div>

                    <div class="filter-header-form">
                        <form method="get" action="{% url 'active' %}">
                            <div class="filter-row">
                                <!-- 搜索框 -->
                                <div class="filter-group">
                                    <label for="searchInput">搜索活动</label>
                                    <input type="text" class="filter-control" id="searchInput" name="search"
                                           placeholder="输入关键词..." value="{{ search_query }}">
                                </div>

                                <!-- 分类筛选 -->
                                <div class="filter-group">
                                    <label for="categorySelect">活动分类</label>
                                    <select class="filter-control" id="categorySelect" name="category">
                                        <option value="">全部类别</option>
                                        {% for category in categories %}
                                        <option value="{{ category.id }}" {% if selected_category == category.id|stringformat:"i" %}selected{% endif %}>
                                            {{ category.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <!-- 状态筛选 - 新增 -->
                                <div class="filter-group">
                                    <label for="statusSelect">活动状态</label>
                                    <select class="filter-control" id="statusSelect" name="status">
                                        <option value="">全部状态</option>
                                        <option value="upcoming" {% if status_filter == "upcoming" %}selected{% endif %}>即将开始</option>
                                        <option value="ongoing" {% if status_filter == "ongoing" %}selected{% endif %}>进行中</option>
                                        <option value="ended" {% if status_filter == "ended" %}selected{% endif %}>已结束</option>
                                    </select>
                                </div>

                                <!-- 排序方式 -->
                                <div class="filter-group">
                                    <label for="sortSelect">排序方式</label>
                                    <select class="filter-control" id="sortSelect" name="sort">
                                        <option value="newest" {% if sort_by == "newest" %}selected{% endif %}>最新发布</option>
                                        <option value="soonest" {% if sort_by == "soonest" %}selected{% endif %}>即将开始</option>
                                        <option value="popular" {% if sort_by == "popular" %}selected{% endif %}>最受欢迎</option>
                                        <option value="most_comments" {% if sort_by == "most_comments" %}selected{% endif %}>最多评论</option>
                                    </select>
                                </div>

                                <!-- 筛选按钮 -->
                                <div class="filter-actions">
                                    <button class="btn-filter" type="submit">
                                        <i class="fas fa-filter me-1"></i> 筛选
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <!-- 左侧热门活动 -->
                <div class="col-lg-3 mb-4">
                    <!-- 热门活动 -->
                    <div class="popular-activities">
                        <h5 class="popular-title">热门活动</h5>

                        {% for activity in popular_activities %}
                        <div class="popular-item">
                            <div class="popular-image"
                                 style="background-image: url('{% if activity.image and activity.image.url %}{{ activity.image.url }}{% else %}/static/images/default-activity.jpg{% endif %}')">
                            </div>
                            <div class="popular-info">
                                <div class="popular-name">
                                    <a href="{% url 'active_detail' activity.id %}" class="text-decoration-none text-dark">
                                        {{ activity.title }}
                                    </a>
                                </div>
                                <div class="popular-meta">
                                    <i class="fas fa-users me-1"></i> {{ activity.current_participants }}人参加
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- 右侧活动列表 -->
                <div class="col-lg-9">
                    <!-- 活动列表标题和统计 -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4 class="section-title mb-0">全部活动</h4>
                        <span class="stats-badge">共 {{ total_activities }} 个活动</span>
                    </div>

                    <!-- 活动列表 -->
                    <div class="row">
                        {% for activity in page_obj %}
                        <div class="col-md-6 col-lg-4 mb-4">
                            <div class="activity-card">
                                <div class="activity-image"
                                     style="background-image: url('{{ activity.get_image_url }}')">
                                    <span class="activity-category">{{ activity.category.name }}</span>
                                    <!-- 动态状态显示 -->
                                    <span class="activity-status {{ activity.time_based_status }} {% if activity.is_full %}activity-full{% endif %}">
                                        {% if activity.is_full %}已满员
                                        {% elif activity.time_based_status == 'upcoming' %}即将开始
                                        {% elif activity.time_based_status == 'ongoing' %}进行中
                                        {% elif activity.time_based_status == 'ended' %}已结束
                                        {% elif activity.time_based_status == 'cancelled' %}已取消
                                        {% elif activity.status == 'draft' %}草稿
                                        {% else %}未知状态{% endif %}
                                    </span>
                                </div>
                                <div class="activity-body">
                                    <h5 class="activity-title">
                                        <a href="{% url 'active_detail' activity.id %}" class="text-decoration-none text-dark">
                                            {{ activity.title }}
                                        </a>
                                    </h5>
                                    <div class="activity-meta">
                                        <span><i class="far fa-calendar me-1"></i> {{ activity.start_time|date:"m月d日" }}</span>
                                        <span><i class="far fa-clock me-1"></i> {{ activity.start_time|time:"H:i" }}</span>
                                    </div>
                                    <div class="activity-location">
                                        <i class="fas fa-map-marker-alt me-1"></i> {{ activity.location_name }}
                                    </div>
                                    <div class="activity-participants">
                                        <div class="progress">
                                            {% widthratio activity.current_participants activity.max_participants 100 as percentage %}
                                            <div class="progress-bar
                                                {% if percentage|add:0 < 50 %}bg-warning
                                                {% elif percentage|add:0 < 80 %}bg-success
                                                {% else %}bg-danger{% endif %}"
                                                role="progressbar"
                                                style="width: {{ percentage }}%">
                                            </div>
                                        </div>
                                        <div class="participant-count">{{ activity.current_participants }}/{{ activity.max_participants }}人</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="col-12">
                            <div class="empty-state">
                                <i class="fas fa-search"></i>
                                <h4>暂无活动</h4>
                                <p>没有找到符合筛选条件的活动</p>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                    <!-- 分页 -->
                    {% if page_obj.has_other_pages %}
                    <nav aria-label="活动分页">
                        <ul class="pagination">
                            {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if location_filter %}&location={{ location_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if sort_by %}&sort={{ sort_by }}{% endif %}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            {% else %}
                            <li class="page-item disabled">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            {% endif %}

                            {% for i in page_obj.paginator.page_range %}
                                {% if page_obj.number == i %}
                                <li class="page-item active"><a class="page-link" href="#">{{ i }}</a></li>
                                {% else %}
                                <li class="page-item"><a class="page-link" href="?page={{ i }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if location_filter %}&location={{ location_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if sort_by %}&sort={{ sort_by }}{% endif %}">{{ i }}</a></li>
                                {% endif %}
                            {% endfor %}

                            {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if location_filter %}&location={{ location_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if sort_by %}&sort={{ sort_by }}{% endif %}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            {% else %}
                            <li class="page-item disabled">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                </div>
            </div>
        </div>
    </main>
{% endblock %}

{% block js %}
{{ block.super }}
<script>
    // 自动提交表单的筛选功能
    document.addEventListener('DOMContentLoaded', function() {
        // 分类筛选自动提交
        const categorySelect = document.getElementById('categorySelect');
        categorySelect.addEventListener('change', function() {
            this.closest('form').submit();
        });

        // 状态筛选自动提交 - 新增
        const statusSelect = document.getElementById('statusSelect');
        statusSelect.addEventListener('change', function() {
            this.closest('form').submit();
        });

        // 排序方式自动提交
        const sortSelect = document.getElementById('sortSelect');
        sortSelect.addEventListener('change', function() {
            this.closest('form').submit();
        });

        // 回车键搜索
        const searchInput = document.getElementById('searchInput');
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                this.closest('form').submit();
            }
        });
    });
</script>
{% endblock %}